<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>pixel</title>
        <script type="text/javascript" src="../script/global/bin/need.js" ></script>
        <script type="text/javascript" src="../script/global/born/util/util.js" ></script>
    	<script type="text/javascript" src="../script/global/born/canvas/canvas.js" ></script>
    </head>
    <body>
    	<style>
        	#lCanvas{
				border-radius:5px;
				width:1500px;
				height:600px;
				box-shadow:0 0 5px rgba(0,0,0,.5);
				margin:20px auto;
			}
        </style>
    	<canvas id="lCanvas"></canvas>
        <script type="text/javascript" >
        	(function(win){
				
				var animate = need('animate') ;
				var getImageData = need('getImageData') ;
				var util = need('util') ;
				
				var cvs = document.getElementById('lCanvas') ;
				var cxt = cvs.getContext('2d') ;
				cvs.width = 1500 ;
				cvs.height = 600 ;	
				
				var pixel = getImageData('MODULE',200) ;
				var imageData = pixel.data ;
				var nowPixel = {} ;
				var i = 0 , j = 0 ;
				
				for( j = 0 ; j < imageData.length ; j+=4 ){
					if( imageData[j] === 0 && imageData[j+1] === 0 && imageData[j+2] === 0 && imageData[j+3] === 255 ){
						i = j /4 ;
						if(!nowPixel[parseInt(i/pixel.width)]){
							nowPixel[parseInt(i/pixel.width)] = [] ;	
						}
						nowPixel[parseInt(i/pixel.width)].push(i % pixel.width) ;
					}	
				}
				//@note 缩小像素数组
				var radii = 2 ;
				for( i in nowPixel  ){
					for( j = 0 ; j < nowPixel[i].length ; j++ ){
						if( j % radii !== 0 ){
							nowPixel[i].splice(j,1) ;
						}	
					}	
				}
				var runCount = function(y,list){
					for( var i = 0 ; i < list.length ; i++ ){
						cxt.fillRect(list[i]-1,y-1,radii,radii) ;
					}
				} ;
				var count = 0 ;
				for( i in nowPixel ){
					(function(i){
						
						window.setTimeout(function(){
							runCount( parseInt(i) , nowPixel[i] ) ;							
						},count*100) ;	
						
					}(i)) ;
					
					count++ ;
				}
				
			}(window)) ;
        </script>
    </body>
</html>
